<template>
  <div class="app">
    <navigation-bar v-if="oauth" v-show="!hideNavigationBar" @setFull="setFull"></navigation-bar>
    <router-view v-if="oauth" :class="hideNavigationBar ? 'full' : 'router'"></router-view>
  </div>
</template>
<script setup>
import { getCurrentInstance, onBeforeMount, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

const { proxy } = getCurrentInstance();
let oauth = ref(false)
let hideNavigationBar = ref(false);
onBeforeMount(async () => {
  const route = useRoute(), router = useRouter();
  await router.isReady()
  let authCode = route.query.code;

  if (authCode) {
    proxy.$Request.get(proxy.$urlApi.login.token, {code: authCode, grant_type: 'authorization_code', redirect_uri: location.origin}).then(res => {
      if (res.data.code == 200) {
        localStorage.setItem('TOKENDATA', JSON.stringify(res.data.data))
        location.replace(location.origin)
      }
    }).catch(res => {
    })
  } else {
    proxy.$Request.get(proxy.$urlApi.login.userinfo).then(res => {
      if (res.data.code == 200) {
        localStorage.setItem('USERINFO', JSON.stringify(res.data.data));
        oauth.value = true
      } else {
        localStorage.clear()
        location.replace(location.origin)
      }
    }).catch(res => {
    })
  }
})

function setFull(value) {
  hideNavigationBar.value = value;
}
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.app {
  background: #F9FAFA;
}

.flex {
  display: flex;
}

.flex-s {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-left {
  margin-right: auto;
}

.flex-right {
  margin-left: auto;
}

// 阴影
.shadow {
  border: 1px solid #ccc;
  /* 边框样式 */
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  /* 添加阴影效果 */
}


.router {
  top: 70px;
  left: 234px;
  // background-color: #d3dce6;
  position: absolute;
  width: calc(100% - 234px);
  // height: 100%;
  white-space: nowrap;
  /* 防止文本换行 */
}

.red {
  color: red;
}

.black {
  color: black;
}

.full {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  height: 100vh;
  // background-color: #ccc;
}

.cursor {
  cursor: pointer;
}
</style>
